<template>
  <page-container title="菜单管理">
    <PaginationTable
      ref="pageTableIns"
      :load="loadTableData"
      :row-config="{ keyField: 'menuId' }"
      auto-load
      stripe
      :tree-config="{
        transform: true,
        expandAll: true,
        parentField: 'parentId',
        rowField: 'menuId',
        trigger: 'row'
      }"
      border="inner"
    >
      <template #tools>
        <!-- <el-button type="primary" @click="handleAdd">新建菜单</el-button> -->
      </template>
      <tree-column field="menuName" title="菜单名称" row-field="menuId">
      </tree-column>

      <vxe-column title="序号" field="showOrder" sortable></vxe-column>

      <vxe-column title="图标">
        <template #default="scope">
          {{ scope.row.icon }}
          <svg-icon :name="scope.row.icon"></svg-icon>
        </template>
      </vxe-column>

      <vxe-column title="路由" field="routePath"></vxe-column>

      <vxe-column title="资源地址" field="src"></vxe-column>

      <!-- <vxe-column title="操作" fixed="right" width="100">
            <template #default="scope">
                <el-space class="tool-color">
                    <el-button text type="primary" @click.stop="handleUpdate(scope.row)"
                        >编辑</el-button
                    >
                    <el-popover placement="bottom-end">
                        <template #trigger>
                            <el-button type="primary" text @click.stop>更多</el-button>
                        </template>
                        <el-space size="large" vertical>
                            <el-button block text type="primary" @click="handleAddChild(scope.row)">
                                新增下级
                            </el-button>
                            <el-button text block type="danger" @click="handleAddChild(scope.row)">
                                删除
                            </el-button>
                        </el-space>
                    </el-popover>
                </el-space>
            </template>
        </vxe-column> -->

      <template #extends>
        <!-- <EditMenu v-model:visible="openEdit" :edit-row="editRow" :edit-row-parent="parentRow">
            </EditMenu> -->
      </template>
    </PaginationTable>
  </page-container>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getUserPremissionApi } from '@/api/common';
  // import useRowEdit from '@/hooks/useRowEdit';
  // import EditMenu from './editMenu.vue';

  const pageTableIns = ref<PagenationTableInstance>();

  const loadTableData: loadPaginationRequest = async ({ orderParams }) => {
    const { menuList } = await getUserPremissionApi();
    const sortList = menuList.sort(
      ({ showOrder: aorder = 0 }, { showOrder: border = 0 }) => {
        if (orderParams?.sortOrder == 'desc') {
          return border - aorder;
        }
        return aorder - border;
      }
    );
    return Promise.resolve({
      dataList: sortList
    });
  };

  // const { handleAdd, handleAddChild, handleUpdate, openEdit, editRow, parentRow } = useRowEdit();
</script>
